<template>
  <div id="container" class="container">
    <h3 class="title">
      <span />
      栏目列表
    </h3>
    <el-tabs
      v-model="activeName"
      class="tabs"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane
        v-for="item in langList"
        :key="item.id"
        :label="item.lang"
        :name="item.lang"
      />
    </el-tabs>
    <div class="content">
      <el-button
        type="primary"
        class="orange four"
        icon="el-icon-plus"
        style="margin-bottom: 15px; margin-left: 15px"
        size="small"
        @click="goAdd"
      >
        添加栏目
      </el-button>
      <el-button
        type="primary"
        class="six"
        icon="el-icon-document-copy"
        style="margin-bottom: 15px; margin-left: 15px"
        size="small"
        @click="dialogShow = true"
      >
        复制站点栏目
      </el-button>
      <BouncedDialog
        title="选择站点"
        :dialog-show.sync="dialogShow"
        width="40%"
        class="copy"
      >
        <el-form :data="copyForm" label-width="80px">
          <el-form-item label="目标站点">
            <el-select v-model="copyForm.target_site" multiple>
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.domain"
                :value="item.id"
                :disabled="item.id == siteId ? true : false"
              />
            </el-select>
          </el-form-item>
          <el-form-item label=" ">
            <el-button @click="dialogShow = false">取消</el-button>
            <el-button type="primary" @click="goCopy">确定</el-button>
          </el-form-item>
        </el-form>
      </BouncedDialog>
      <el-table
        ref="refTable"
        :data="orderData"
        row-key="id"
        :indent="30"
        :expand-row-keys="defaultKeys"
        @row-click="expandChange"
      >
        <el-table-column label="ID" width="150px" prop="id" />
        <el-table-column label="栏目名称" prop="title" align="left" />

        <el-table-column
          label="栏目地址"
          prop="fullUrl"
          align="left"
          width="150px"
        >
          <template slot-scope="scope">
            <div @click.stop>
              <el-popover
                placement="top-start"
                title=""
                width=""
                trigger="click"
                :content="scope.row.fullUrl"
              >
                <span slot="reference" class="subTitle">
                  {{ scope.row.fullUrl }}
                </span>
              </el-popover>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="缩略图" width="100px" prop="thumbnail">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.thumbnail"
              style="width: 100%; height: auto"
              :src="scope.row.thumbnail.url"
              :fit="'cover'"
              :preview-src-list="[scope.row.thumbnail.url]"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column label="banner图" width="100px" prop="banner">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.banner"
              style="width: 100%; height: auto"
              :src="scope.row.banner.url"
              :fit="'cover'"
              :preview-src-list="[scope.row.banner.url]"
            >
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
          </template>
        </el-table-column>
        <el-table-column
          label="栏目排序"
          prop="sort"
          width="80px"
          align="center"
        />
        <el-table-column
          label="是否启用"
          prop="status"
          width="250px"
          align="center"
        >
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              :active-value="1"
              :inactive-value="2"
              active-text="正常"
              inactive-text="禁用"
              active-color="#f84311"
              inactive-color="rgba(0,0,0,0.2)"
              @change="disableUser(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fixed="right"
          width="250px"
        >
          <template slot-scope="scope">
            <el-button
              type="primary"
              class="orange"
              size="mini"
              @click.stop="add(scope.row)"
            >
              添加子栏目
            </el-button>
            <el-button class="edit" size="mini" @click.stop="editor(scope.row)">
              编辑
            </el-button>
            <el-button class="dele" size="mini" @click.stop="del(scope.row)">
              删除
            </el-button>
            <el-button
              v-if="scope.row.is_design == 1"
              class="edit"
              size="mini"
              @click.stop="viewDesign(scope.row)"
            >
              可视化设计
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>
<script>
import columnApi from '@/api/column.js'
import websiteApi from '@/api/website.js'
import websetApi from '@/api/websetting'
export default {
  data() {
    return {
      dialogShow: false,
      orderData: [], // 文章分类列表
      options: [], // 站点列表
      copyForm: [],
      value: '',
      website_id: '',
      searchForm: {
        website_id: ''
      },
      langList: '',
      activeName: '',
      addForm: {
        title: '',
        parent_id: 0,
        website_id: '',
        alias: '',
        module_id: '',
        list_tpl: '',
        detail_tpl: '',
        type: ''
      },
      // val: {
      //   status: 2
      // },
      siteId: '',
      defaultKeys: []
    }
  },
  computed: {
    siteId1() {
      return this.$store.getters.siteId
    }
  },
  watch: {
    siteId1(val, value) {
      this.siteId = val

      this.getLang()
    }
  },
  created() {
    // this.getWeblist()
    this.siteId = this.$store.getters.siteId
    const path = this.$route.query.key
    console.log(path, '修改后传递回来的path')
    if (path) {
      const arr = path.split('-')
      arr.splice(0, 1)
      console.log(arr, '展开的节点')
      this.defaultKeys = arr
    }

    console.log(this.siteId)
    if (this.siteId) {
      this.getLang()
    }
    this.getWeblist()
  },
  mounted() {},
  updated() {},
  methods: {
    viewDesign(row) {
      const url =
        '/design/index?website_id=' +
        this.siteId +
        '&lang=' +
        this.activeName +
        '&html=' +
        row.design_path
      window.open(url)
    },
    // 复制站点栏目
    goCopy() {
      const val = {
        original_site: this.siteId,
        lang: this.activeName,
        target_site: this.copyForm.target_site
      }
      columnApi.copyColumn(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
          this.dialogShow = false
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 切换栏目状态
    disableUser(row) {
      const val = {
        id: row.id,
        title: row.title,
        parent_id: row.parent_id,
        website_id: row.website_id,
        alias: row.alias,
        module_id: row.module_id,
        list_tpl: row.list_tpl,
        detail_tpl: row.detail_tpl,
        type: row.type,
        lang: row.lang,
        status: ''
      }
      if (row.status == 1) {
        val.status = 1
      } else {
        val.status = 2
      }

      columnApi.columnUpdate(val).then(res => {
        if (res.code == 0) {
          this.$message.success(res.msg)
        } else {
          this.$message.error(res.msg)
        }
      })
    },
    // 获取站点语言
    getLang() {
      websetApi.langInfo({ site_id: this.siteId }).then(res => {
        this.langList = res.data
        this.activeName = res.data[0].lang
        this.getList()
      })
    },
    // tab切换
    handleClick(val) {
      this.activeName = val.name
      this.getList()
    },
    expandChange(row, index, e) {
      this.$refs.refTable.toggleRowExpansion(row)
    },
    // 切换单选按钮
    raidoChange(val) {},
    // 获取站点列表
    getWeblist() {
      websiteApi.websiteList().then(res => {
        this.options = res.data
        // this.siteId = res.data[0].id
        // this.getLang()
      })
    },
    // handleChange(val) {
    //   this.siteId = val
    //   this.getLang()
    // },
    // 删除
    del(row) {
      this.$confirm('此操作将永久删除该栏目, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          const val = {
            website_id: this.siteId,
            id: row.id,
            lang: this.activeName
          }
          columnApi.columnDelete(val).then(res => {
            if (res.code == 0) {
              this.$message.success('已删除')
              this.getList()
            } else {
              this.$message.error('删除失败')
            }
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增一级
    goAdd() {
      this.$router.push({
        name: 'addColumn',
        query: { pid: 0, website_id: this.siteId, lang: this.activeName }
      })
    },
    // 新增子级
    add(row) {
      this.$router.push({
        name: 'addColumn',
        query: {
          path: row.path,
          id: row.id,
          website_id: this.siteId,
          lang: this.activeName,
          module_id: row.module_id
        }
      })
    },
    // 编辑
    editor(row) {
      this.$router.push({
        name: 'updateColumn',
        query: { id: row.id, website_id: row.website_id, lang: row.lang }
      })
    },
    // 提交
    submit() {
      this.$refs.addForm.validate(valid => {
        if (valid) {
          if (!this.addForm.id) {
            const val = {
              title: this.addForm.title,
              parent_id: this.addForm.parent_id,
              website_id: this.website_id,
              alias: this.addForm.alias,
              module_id: this.addForm.module_id,
              list_tpl: this.addForm.list_tpl,
              type: this.addForm.type,
              detail_tpl: this.addForm.detail_tpl
            }

            columnApi.columnSave(this.addForm).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            })
          } else {
            // const val = {
            //   id: this.addForm.id,
            //   name: this.addForm.name,
            //   pid: this.addForm.pid,
            //   status: this.addForm.status
            // }
            columnApi.columnUpdate(this.addForm).then(res => {
              if (res.code == 0) {
                this.$message.success(res.msg)
                this.getList()
              } else {
                this.$message.error(res.msg)
              }
            })
          }
        } else {
          this.$message.error('请填写必要信息')
        }
      })
    },
    // 栏目列表
    getList() {
      // this.website_id = this.siteId
      const val = {
        website_id: this.siteId,
        lang: this.activeName
      }

      columnApi.columnList(val).then(res => {
        this.orderData = res.data
      })
    }
  }
}
</script>
<style lang="scss">
.el-table__placeholder {
  width: 0;
}
.copy {
  .el-select {
    width: 100%;
  }
}

#container .columnDialog {
  .el-form--inline .el-form-item__content {
    width: 410px;
  }
  .el-select {
    width: 100%;
  }
}
.tabs.el-tabs--card > .el-tabs__header .el-tabs__item {
  background-color: #eee;
  border: none;
  margin-right: 5px;
}
.tabs.el-tabs--card > .el-tabs__header .el-tabs__item.is-active {
  background-color: #fff;
}
.tabs.el-tabs--card > .el-tabs__header .el-tabs__nav {
  border-radius: 0;
  border: none;
}
.tabs.el-tabs--card .el-tabs__header {
  margin: 0;
}
.tabs.el-tabs--card > .el-tabs__header {
  border-bottom: 0;
}
</style>
<style scoped lang="scss">
.sort_icon {
  height: 30px;
  vertical-align: middle;
  border-radius: 5px;
}
.content {
  background-color: #fff;
  padding-top: 20px;
}
.el-table {
  margin-bottom: 20px;
}
.search {
  min-width: 1350px;
  background-color: #fff;
  padding: 35px 30px 20px;
  border-radius: 5px;
}
#app .comtainer .el-table thead tr,
#app .container .el-table thead th {
  background-color: #fff;
}
.subTitle {
  cursor: pointer;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: normal;
}
</style>
